<template>
  <div
    class="video-box"
    v-on="$listeners"
  >
    <video v-if="src" v-bind="$attrs" class="video" :src="imgSrc" />
    <slot v-else name="error" />
    <!-- <slot name="placeholder" slot="placeholder"></slot> -->
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default:
        ''
    },
    preview: {
      type: Boolean,
      default: false
    },
    previewSrcList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {
    imgSrc() {
      return process.env.VUE_APP_IMG_HOST + this.src
    },
    previewList() {
      if (this.preview && this.previewSrcList.length === 0) {
        return [process.env.VUE_APP_IMG_HOST + this.src]
      }

      return this.previewSrcList.map(x => {
        return process.env.VUE_APP_IMG_HOST + x
      })
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.video-box{
  width: 100%;
    height: 100%;position: relative;
    display: inline-block;
    overflow: hidden;
}
.video {
  width: 100%;
  height: 100%;
}
</style>
